<template>
	<div class="app-container foSi14">
		<div class="dis">
			<div>
				<div class="hei20 foSi13" style="color: #838383;">课程时间</div>
				<el-date-picker v-model="birthday_start" style="width: 140px" size="small" type="date"
					placeholder="开始时间" />
				<el-date-picker v-model="birthday_end" class="mar-left10" style="width: 140px;" size="small"
					type="date" placeholder="截至日期" />
			</div>
			<div class="mar-left10">
				<div class="foSi13" style="height: 20px;color: #838383;">卡类型</div>
				<el-select v-model="type" style="width: 140px" size="small" placeholder="全部">
					<el-option v-for="(item,index) in typeList" :key="index" :label="item.name"
						:value="item.id" />
				</el-select>
			</div>
			<div class="mar-left10">
				<div class="foSi13" style="height: 20px;color: #838383;">卡名称</div>
				<el-select v-model="cardName" style="width: 140px" size="small" placeholder="全部">
					<el-option v-for="(item,index) in cardList" :key="index" :label="item.name"
						:value="item.id" />
				</el-select>
			</div>
			<div style="margin-left: 10px">
				<div class="foSi13" style="height: 20px;color: #838383;">卡号</div>
				<el-input v-model="number" style="width: 140px" size="small" placeholder="卡号" />
			</div>
			<div style="margin-left: 10px">
				<div class="foSi13" style="height: 20px;color: #838383;">持卡人</div>
				<el-input v-model="name" style="width: 140px" size="small" placeholder="姓名/手机号" />
			</div>
			<div class="mar-left10">
				<div class="foSi13" style="height: 20px;color: #838383;">耗卡人</div>
				<el-select v-model="consumption" style="width: 140px" size="small" placeholder="不指定">
					<el-option v-for="(item,index) in consumptionList" :key="index" :label="item.name"
						:value="item.id" />
				</el-select>
			</div>
			<div class="dis disAl" style="padding-top: 20px;">
				<el-button type="primary" size="small" class="mar-left10 bac6b7">查询</el-button>
				<el-button type="primary" class="mar-left10 bac6b7" size="small">导出报表</el-button>
			</div>
		</div>
		<div class="dis disAl mar-top20 mar-bott10">
			总课程共<span style="color: #6b7cdd;">0</span>次，次数卡消费共
			<span style="color: #6b7cdd;">0</span>次，储值卡消费金额共
			<span style="color: #6b7cdd;">0</span>元，期限卡消费共<span style="color: #6b7cdd;">0</span>次
		</div>
		<el-table v-loading="listLoading" :data="list" stripe style="width: 100%">
			<div slot="empty" class="m-empty-box">
				<div class="mar" style="width: 168px;height: 180px;">
					<img src="https://www.jianyigongxiang.com/public/membercard/empty.png" class="wh100">
				</div>
				<div class="title">暂无数据</div>
			</div>
			<el-table-column prop="name" label="耗卡人" width="140"/>
			<el-table-column prop="name" label="卡号" width="140" />
			<el-table-column prop="name" label="卡名称" width="140" />
			<el-table-column prop="name" label="会员卡类型" width="140" />
			<el-table-column label="预约次数/消费金额" width="140">
				<template slot-scope="scope">
					<span>1/1次</span>
				</template>
			</el-table-column>
			<el-table-column prop="name" label="预约时间	" width="140" />
			<el-table-column prop="name" label="课程名称	" width="140" />
			<el-table-column prop="name" label="课程时间	" width="140" />
			<el-table-column prop="name" label="教练" width="140" />
			<el-table-column prop="name" label="预约前卡余额	" width="140" />
			<el-table-column prop="name" label="预约后卡余额	" width="140" />
			<el-table-column prop="name" label="持卡人	" width="140" />
			<el-table-column prop="name" label="持卡人手机号	" width="140" />
			<el-table-column prop="name" label="所属场馆	" width="140" />
			<el-table-column prop="name" label="折合耗卡金额	" width="140" style="color: #6b7cdd;" />
		</el-table>
	</div>
</template>

<script>
	// import fetchList from '@/api/article'
	import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
	import {
		getXuan
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex'
	export default {
		name: 'statisticsCardDetails',
		components: {
			Pagination
		},
		data() {
			return {
				birthday_start: null,
				birthday_end: null,
				type: null,
				typeList: [{
					id: 1,
					name: '次数卡'
				}, {
					id: 2,
					name: '期限卡'
				}],
				cardName: null,
				cardList: [],
				number: null,
				name: null,
				consumptionList: [],
				consumption: null,
				list: null,
				total: 0,
				listLoading: false,
				listQuery: {
					page: 1,
					limit: 20
				}
			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			])
		},
		created() {
			var xuanList = [{
				name: '耗卡汇总',
				url: '/finance/cardConsumptionSummary',
				pd: true
			}, {
				name: '上课耗卡统计',
				url: '/finance/statisticsCard',
				pd: true
			}, {
				name: '上课耗卡明细',
				url: '/finance/statisticsCardDetails',
				pd: true
			}]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 2
			})
			this.getList()
		},
		methods: {
			getList() {}
		}
	}
</script>

<style scoped>
	.app-container{
		paddong: 20px;
	}
	::v-deep .el-table--scrollable-x .el-table__body-wrapper {
	    scrollbar-width: thin;
	}
</style>